<template>
    <div @on-change="onSearch">
        <!-- <p>接收的参数:{{ this.$route.query.food }}</p> -->
        <div>
            <van-tabs color="#ec957d" v-model="active">
                <van-tab title="综合排序">
                    <!-- 正文区域开始 -->
                    <div class="author-info" v-for="x in all" :key="x.lid" @click="goAbout(x.lid)">
                        <img :src="x.pic" class="author-info-avatar" />
                        <div class="author-info-detail">
                            <div class="author-info-nickname">{{ x.food }}</div>
                            <div class="author-info-badge">{{ x.views }} +人学过</div>
                            <div style="-webkit-line-clamp: 1; " class="author-info-introduction" v-html="x.tips"></div>
                        </div>
                    </div>
                </van-tab>
                <!-- <van-tab title="做过最多">
                    <div class="author-info" v-for="x in all" :key="x.lid" @click="goAbout(x.lid)">
                        <img :src="x.pic" class="author-info-avatar" />
                        <div class="author-info-detail">
                            <div class="author-info-nickname">{{ x.food }}</div>
                            <div class="author-info-badge">{{ x.views }} +人学过</div>
                            <div style="-webkit-line-clamp: 1;" class="author-info-introduction" v-html="x.tips">
                            </div>
                        </div>
                    </div>
                </van-tab> -->
            </van-tabs>
        </div>
        <van-empty v-show="all.length == 0" image="search" description="要不试一下别的关键词？" />
    </div>
</template>

<script>
import Vue from "vue";
import { Card } from "vant";
import { Empty } from 'vant';

Vue.use(Empty);
Vue.use(Card);
export default {
    data() {
        return {
            active: 0,
            all: [], //接口数据
        };
    },
    watch: {
        $route: {
            handler() {
                this.onSearch()
            },
        },
    },
    mounted() {
        this.onSearch();
    },
    methods: {
        goAbout(lid) {
            console.log(lid, "");
            this.$router.push({
                path: `/article/${lid}`,
            });
        },
        onSearch() {
            let id = this.$route.query.food;
            console.log(id, "上个页面传递过来的值");
            this.$axios.get(`/select?food=${id}`).then(res => {
                console.log(res.data.data);
                this.all = res.data.data;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.van-card {
    font-size: 18px;
    font-weight: bold;
    color: #4a4945;
}

.article {
    background: #f6f6f6;
    height: 100vh;
}

.author-info {
    display: flex;
    margin-bottom: 5px;
    padding: 8px 10px;
    background: #fafafa;
}

.author-info-avatar {
    object-fit: cover;
    width: 100px;
    height: 100px;
    border-radius: 8px;
}

.author-info-detail {
    margin-left: 15px;
    font-size: 10px;
    color: #4a4945;
    // -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.author-info-nickname {
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: bold;
}

.author-info-badge {
    font-size: 12px;
    color: #999999;
}
</style>
